<!--用户管理页-->
<template>
  <div class="form-container">
      <h2 style="text-align: center">用户注册</h2>
      <el-form :model="form" label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="用户名">
              <!-- :disabled="form.id!=null表示新增用户时，id为null，此时禁用用户名输入框"-->
              <el-input v-model="form.username" placeholder="请输入用户名" :disabled="form.id!=null"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input v-model="form.email" placeholder="请输入昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="button-container" style="text-align: center">
          <el-button type="primary" @click="saveRegister">点击注册</el-button>
        </div>
      </el-form>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

//控制新增用户弹窗是否显示
const dialogVisible = ref(true);
//定义变量保存新增用户表单数据
const form = ref({
  username: '',
  password: '',
  nickname: '',
  age: '',
  gender: '',
  phone: ''
})

//性别
const genderOptions = ref([
  {label: '男', value: '1'},
  {label: '女', value: '2'}
])

//保存注册数据
const saveRegister = () => {
  let data = qs.stringify(form.value);
  console.log(data);
  //发送请求，查询数据库里user表里的用户名,如果有就提示用户名已存在
  axios.post(BASE_URL + '/v1/user/register', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('注册成功!');
      //跳转到登录页面
      router.push('/login');
    } else {
      ElMessage.error('用户名已存在');
    }
  })
}
</script>

<style scoped>
</style>